<template>
  <ClientOnly>
    <header class="ssd-header" title="双击我可以隐藏侧边栏" @dblclick="handleClickExpand">
    <teleport to="body">
      <ksd-vip ref="userVipRef"></ksd-vip>
      <k-login ref="loginRef" @success="handleLoginFinshed"></k-login>
    </teleport>
    <div class="select_team">
      <div class="current_team">
        <div class="logo_box" @click="navigateTo('/')">
          <img src="/imgs/logo.png" alt="">
        </div>
        <div class="title_box"  @click="navigateTo('/')">
          <div class="title_line">
            <span class="team_name fw">好好学习，天天向上</span>
          </div>
        </div>
      </div>
    </div>
    <div class="item-container">
      <div class="top-info">
        <div class="item-iconx ml10 flex align-center">
          <div class="mr10 pr tp2 fz13" v-if="userStore.isLogin">
            <span class="mr10">在线人数：{{onlineCount}}</span>
            <span>{{getTimeOfDay()}}</span>
            <span v-if="userStore.viptype>1">尊敬的VIP用户：{{userStore.username}}</span>
            <span v-else>尊敬的用户： {{userStore.username}}</span>
          </div>
          <button v-if="!userStore.isLogin" type="button" class="gda-btn gda-btn-primary gda-btn-sm pointer" style="padding:6px 12px;"
                  @click.prevent.stop="handleLoginOpen()"><span>登录/注册</span></button>
          <div v-if="userStore.isLogin" class="user-dropdown__avatar ml10 pr">
            <div class="gda-avatar gda-avatar-circle gda-avatar-image"
                 style="width: 32px; height: 32px; line-height: 32px;"><img
                :src="userStore.avatar"
                :alt="userStore.username" style="width: 100%;height: 100%;"></div>
            <div class="user-dropdownbox">
              <div class="gda-dropdown gda-dropdown-placement-bottomRight">
                <ul role="menu" tabindex="0"
                    class="gda-dropdown-menu gda-dropdown-menu-vertical gda-dropdown-menu-root gda-dropdown-menu-light user-dropdown__menu gda-dropdown-content">
                  <li role="menuitem"
                      class="gda-dropdown-menu-item gda-dropdown-menu-item-active user-dropdown__menu-info">
                    <div class="user-dropdown__user-info">
                      <div class="user-dropdown__avatar">
                        <nuxt-link to="/user">
                          <span class="gda-avatar gda-avatar-circle gda-avatar-image"
                                style="width: 48px; height: 48px; line-height: 48px; font-size: 24px;"><img
                              :src="userStore.avatar"
                              :alt="userStore.username"></span>
                        </nuxt-link>
                      </div>
                      <div class="user-dropdown__info">
                        <div class="user-dropdown__name">
                          <nuxt-link to="/user"><span class="">{{ userStore.username }}</span></nuxt-link>
                          <span v-if="userStore.isLogin && userStore.regDays > 0" class="ml5 fz12 c999">(注册{{userStore.regDays}}天)</span>
                        </div>
                        <div id="copyhtml" style="position: fixed;top:-1000px;">我的用户编号是：{{userStore.uuid}}</div>
                        <div title="点我复制" class="copy-btn pointer" data-clipboard-target="#copyhtml" @click="handleClipboardText($event)">编号：{{userStore.uuid}}</div>
                        <div class="user-dropdown__user-id pointer" @click="handleOpenVip">
                          <div>用户身份：
                            <ksd-vip-flag :viptype="userStore.viptype"></ksd-vip-flag>
                            <span v-if="userStore.isLogin && userStore.viptype > 1"  class="ml5 fz12 c999">(vip剩余天数{{userStore.vipDays}}天)</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="user-dropdown__card-row">
                      <div class="user-dropdown__card-row-card pointer">
                        <a href="/#my">
                          <div class="business-banner-storage-card-public">
                            <div class="business-banner-storage-card-public__header">
                              <div class="business-banner-storage-card-public__text"><label
                                  class="fw">{{ stateUserInfo.snote || 0 }}</label>
                              </div>
                            </div>
                            <div class="business-banner-storage-card-public__body">
                              <div class="business-banner-storage-card-public__title">学习课程</div>
                            </div>
                          </div>
                        </a>
                      </div>
                      <div role="separator" class="gda-divider gda-divider-vertical"></div>
                      <div class="user-dropdown__card-row-card pointer">
                        <a href="/#fav">
                          <div class="business-banner-gaodou-card-public">
                            <div class="business-banner-gaodou-card-public__header"><span
                                class="fw">{{ stateUserInfo.fnote || 0 }}</span>
                            </div>
                            <div class="business-banner-gaodou-card-public__body"><span>收藏课程</span></div>
                          </div>
                        </a>
                      </div>
                      <div role="separator" class="gda-divider gda-divider-vertical"></div>
                      <div class="user-dropdown__card-row-card pointer">
                        <a href="/resume">
                          <div class="business-banner-material-card-public">
                            <div class="business-banner-material-card-public__header"><span
                                class="fw">{{ stateUserInfo.resume || 0 }}</span>
                            </div>
                            <div class="business-banner-material-card-public__body"><span>简历服务</span></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="business-banner-vip-card-public user-dropdown__vip-card"
                         style="background: linear-gradient(272.61deg, rgb(206, 215, 233) 2.18%, rgb(218, 224, 238) 97.82%);">
                      <div class="business-banner-vip-card-public__header"  v-if="userStore.isLogin && userStore.viptype == 1" style="color: rgb(47, 54, 64);"><img
                          src="https://cdn.dancf.com/fe-assets/20240723/Users/hongcha/Downloads/42b3b70dfd21f28e380a0ef82d6df5c6.svg"
                          alt="icon" class="business-banner-vip-card-public__icon">
                        <div class="business-banner-vip-card-public__title">免费版·个人</div>
                        <div class="business-banner-vip-card-public__time">
                          <div class="business-vip-time"></div>
                        </div>
                      </div>
                      <div  v-if="userStore.isLogin && userStore.viptype == 1" class="business-banner-vip-card-public__body" style="padding-top: 8px;" @click.prevent.stop="handleOpenVip">
                        <div class="business-banner-vip-card-public__item" style="margin-top: 0px;">
                          <div class="business-banner-vip-card-public__item-left">
                            <div class="business-banner-vip-card-public__item-name">升级会员</div>
                            <div class="business-banner-vip-card-public__item-tip"> 获取经验分享、面试简历、运维部署等权益
                            </div>
                          </div>
                          <div class="business-banner-vip-card-public__item-btn-wrapper"
                               @click.prevent.stop="handleOpenVip">
                            <button type="button"
                                    class="gda-btn gda-btn-sm business-banner-vip-card-public__item-btn"
                                    style="background: linear-gradient(89.34deg, rgb(254, 206, 113) 0%, rgb(255, 217, 119) 98.07%); color: rgb(114, 68, 15); border: 1px solid transparent;">
                              <span>开通会员</span></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <div role="separator" class="gda-divider gda-divider-vertical" style="opacity: 0;"></div>
                  <li role="menuitem" class="pointer gda-dropdown-menu-item user-dropdown__menu-item">
                    <a href="/user/buy">我的订单</a>
                  </li>
                  <li role="menuitem" class="pointer gda-dropdown-menu-item user-dropdown__menu-item">
                    <a href="/user">账号设置</a>
                  </li>
                  <li role="menuitem" @click="handleLogout"
                      class="pointer gda-dropdown-menu-item user-dropdown__menu-item"> 退出登录
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  </ClientOnly>
</template>
<script setup>
import Clipboard from "clipboard";
const platformStore = useStore.platformState()
const userVipRef = ref({})
const loginRef = ref({})
const userStore = useStore.userState()
const route = useRoute()
const currentIndex = ref(route.fullPath)
const channelList = ref([])
const expand = ref(false)
const stateUserInfo = ref({})
const onlineCount = ref(0)

const handleClickExpand = ()=>{
  platformStore.setExpandFlag(!platformStore.expandFlag)
}

const handleClipboardText = (e) => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('内容已复制到剪切板，可粘贴')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}

const handleLoadChannel = async () => {
  var items = sessionStorage.getItem("cc-channelList")
  if (!items) {
    const resp = await useLoadChannelList()
    channelList.value = resp.data
    sessionStorage.setItem("cc-channelList", JSON.stringify(resp.data))
  } else {
    channelList.value = JSON.parse(items)
  }
}
const handleChangeTag = (item) => {
  if (currentIndex.value == item.url) return
  currentIndex.value = item.url
  navigateTo(item.url)
}

const handleLogout = () => {
  useDialog().warning({
    content: "是否要退出登录？",
    positiveText: "退出",
    negativeText: "取消",
    onPositiveClick: async () => {
      // 退出逻辑
      useLogout()
    },
  });
}

const handleLoginFinshed = async () => {
  window.location.reload()
}

const handleOpenVip = async () => {
  await useLoginDialog()
  userVipRef.value.handleOpen()
}

const handleLoginOpen = () => {
  loginRef.value.handleOpen()
}

const handleStateUserInfo = async () => {
  if(userStore.isLogin) {
    const resp = await useLoadUserGetApi()
    userStore.setLoginUserInfo(resp.data)
    onlineCount.value = resp.data.onlineNums
    var result = resp.data.userMessageVos;
    for (let i = 0; i < result.length; i++) {
      stateUserInfo.value[result[i].ckey] = result[i].mnum || 0
    }
  }
}


onMounted(() => {
  currentIndex.value = route.fullPath
  handleLoadChannel()
  handleStateUserInfo()
})

</script>
<style scoped lang="scss">
.ssd-header {
  width: 100%;
  height: 45px;
  z-index: 100;
  border-bottom: 1px solid #f1f2f4;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}


.select_team {
  padding: 0 8px;
  box-sizing: border-box;
  position: relative;
  background: white;
  user-select: none
}

.select_team .current_team {
  display: flex;
  align-items: center
}

.select_team .current_team .logo_box {
  width: 106px;
  margin: 0 8px;
  cursor: pointer
}

.select_team .current_team .title_box {
  display: flex;
  align-items: center;
  justify-content: center
}

.select_team .current_team .title_box .title_line {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center
}

.select_team .current_team .title_box .title_line .team_name {
  cursor: pointer;
  height: 40px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  color: #2f2e3f;
  line-height: 40px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select_team .current_team .title_box .title_line .team_name.corp-style {
  max-width: 192px
}

.select_team .current_team .title_box .title_line .package-name {
  height: 20px;
  margin-left: 4px;
  width: 65px;
  cursor: pointer
}

.select_team .current_team .title_box.dingding-team-box {
  position: relative;
  top: -6px
}

.select_team .current_team .title_box.dingding-team-box .dingding-sign {
  font-size: 12px;
  top: 30px;
  left: 0;
  opacity: .4;
  position: absolute
}

.select_team .current_team .arrow-drop-down {
  padding-left: 10px;
  display: inline-block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background: url(https://lhcdn.lanhuapp.com/dashboard/production/assets/arrow_drop_down.b14f7e15.svg) center center no-repeat;
  transition: all .3s;
  transform: rotate(0)
}

.select_team .current_team .arrow-drop-down.trans {
  transition: all .3s;
  transform: rotate(180deg)
}

</style>
